<template>
  <div class="container">
    <!-- 顶部标题 -->
        <div class="header">
      <span class="back-btn" @click="goBack">&#8592;</span>
      AI智能助手
    </div>
    <!-- 消息展示 -->
    <div class="msg-list">
      <div v-for="(item, index) in messageList" :key="index" :class="['msg-row', item.position]">
        <div class="msg-bubble">{{ item.message }}</div>
      </div>
    </div>
    <!-- 底部输入栏 -->
    <form class="input-bar" @submit.prevent="onSend">
      <input v-model="input" type="text" placeholder="请输入您的问题…" autocomplete="off" />
      <button type="submit">发送</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter();
const goBack = () => {
  router.back();
}

const QF_API_KEY = 'bce-v3/ALTAK-Og7E53Qn96DVqpidvjXZj/a9af8071ad8f755a42873aba599e32442470388d'
const QF_MODEL = 'deepseek-v3.1-250821'
const SYSTEM_PROMPT = '你现在是一个饿了么平台的智能助手，帮助用户解决与饿了么平台相关的问题。请确保你的回答准确且有帮助。'

const messageList = ref([]);
const input = ref('');

const onSend = async () => {
  const text = input.value.trim()
  if (!text) return
  messageList.value.push({ position: 'right', message: text })
  input.value = ''

  const messages = [
    { role: 'system', content: SYSTEM_PROMPT },
    ...messageList.value.map(item => ({
      role: item.position === 'right' ? 'user' : 'assistant',
      content: item.message,
    }))
  ]
  try {
    const res = await axios.post(
      'https://qianfan.baidubce.com/v2/chat/completions',
      { model: QF_MODEL, messages },
      { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${QF_API_KEY}` } }
    )
    // 打印响应内容
    const reply = res?.data?.choices?.[0]?.message?.content || res?.data?.result || '（无回复）'
    messageList.value.push({ position: 'left', message: reply })
  } catch (e) {
    const err = e?.response?.data?.error_msg || e?.response?.data?.message || e.message || '请求失败'
    messageList.value.push({ position: 'left', message: '错误：' + err })
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: #d7d7d7;
  display: flex;
  flex-direction: column;
}

.msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 70px 0;
}

.msg-row {
  display: flex;
  margin: 10px 0;
}

.msg-row.left {
  justify-content: flex-start;
}

.msg-row.right {
  justify-content: flex-end;
}

.msg-bubble {
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 16px;
  background: #fff;
  color: #222;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  word-break: break-all;
}

.msg-row.right .msg-bubble {
  background: #0097FF;
  color: #fff;
}

.input-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: #f5f5f5;
  z-index: 10;
  padding: 10px 8px;
  display: flex;
  gap: 8px;
}

.input-bar input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 15px;
  outline: none;
}

.input-bar button {
  background: #0097FF;
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 0 18px;
  font-size: 15px;
  cursor: pointer;
  height: 36px;
}

.input-bar button:hover {
  background: #0077cc;
}

.header {
  height: 56px;
  line-height: 56px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background: #0097FF;
  color: #fff;
  letter-spacing: 2px;
  flex-shrink: 0;
  position: relative;
}
.back-btn {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  cursor: pointer;
  color: #fff;
  padding: 0 8px;
  user-select: none;
}
</style>
